<template>
    <div v-if="pagination" class="pagination">
        <el-pagination :layout="layout" :page-sizes="sizeArray" :total="total" :current-page="pageNum" :page-size="pageSize"
            @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange"></el-pagination>
    </div>

</template>

<script>
export default {
    props: {
        /** 是否显示分页 */
        pagination: {
            type: Boolean,
            default: true,
        },
        layout: {
            type: String,
            default: 'sizes, prev, pager, next',
        },
        // size大小
        sizeArray: {
            type: Array,
            default: () => [10, 20, 50, 100],
        } /** 当前分页数 */,
        pageSize: {
            type: Number,
            default: 10,
        },
        /** 当前页 */
        pageNum: {
            type: Number,
            default: 1,
        },
        /** 总条数 */
        total: {
            type: Number,
            default: 1,
        },
    },
    dat() {
        return {}
    },
    mounted() {
        const pagin = document.querySelector('.pagination')
        pagin.style.width = document.querySelector('.el-table').clientWidth + 'px'
        window.addEventListener('resize', () => {
            return (() => {
                const pagin = document.querySelector('.pagination')
                pagin.style.width =
                    document.querySelector('.el-table').clientWidth + 'px'
            })()
        })
    },
    methods: {
        handlePageCurrentChange(page) {
            this.$emit('current-change', page)
        },
        handlePageSizeChange(size) {
            this.$emit('size-change', size)
        },
    },
}
</script>

<style lang="less" scoped>
/** 分页样式 */
.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    padding: 5px 0;
    position: fixed;
    right: 8px;
    bottom: 40px;
    z-index: 10;
    box-sizing: border-box;
}
</style>